<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <div class="buttonHeader">
        <t-button theme="primary" size="large" @click="show = true">添加轮播图</t-button>
        &ensp;
        <t-button theme="primary" size="large" variant="outline">批量删除</t-button>
      </div>

      <el-table ref="multipleTable" :data="imageList" tooltip-effect="dark" style="padding-left: 180px"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="imageName" label="名字" width="180">
        </el-table-column>
        <el-table-column label="图片" width="180">
          <template slot-scope="scope">
            <el-image style="height: 100px" :src="url + scope.row.imagePath" :preview-src-list="srcList"
                      @load="setSrcList(scope.row.imagePath)">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="right" label="操作" width="300">
          <template slot-scope="scope">
            <t-button theme="primary" variant="outline" @click="handleEdit(scope.$index, scope.row, scope)">编辑
            </t-button>
            &ensp;
            <t-button theme="primary" @click="handleDelete(scope.$index, scope.row)">删除</t-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="编辑图片" :visible.sync="dialogFormVisible">
        <el-form :model="image">
          <el-form-item label="名字" :label-width="formLabelWidth">
            <el-input v-model="image.imageName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="轮播图" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action="http://localhost:8081/api/admin/image/upload"
                       :on-success="onSuccess" :on-remove="handleRemove" :file-list="updateList" :on-change="onChange"
                       list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="cancal">取 消</t-button>
          &nbsp;
          <t-button theme="primary" @click="updateImage()">修 改</t-button>
        </div>
      </el-dialog>

      <el-dialog title="添加图片" :visible.sync="show" style="width: 1000px">
        <el-form :model="image">
          <el-form-item label="名字" :label-width="formLabelWidth">
            <el-input v-model="image.imageName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上传图片" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action="http://localhost:8081/api/admin/image/upload"
                       :on-success="handleSuccess" :on-remove="handleRemove" :file-list="fileList"
                       :on-change="handleChange" list-type="picture">
              <t-button theme="primary">点击上传</t-button>
              <br/>
              <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="show = false">取 消</t-button>
          &nbsp;
          <t-button theme="primary" @click="addImage">添 加</t-button>
        </div>
      </el-dialog>
    </t-card>
  </div>
</template>

<script>
import axios from "axios";
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Advertising",
  data() {
    return {
      imageList: [],
      url: "https://7529yh2880.zicp.fun/admin/image/loadimage?fileName=",
      srcList: [],
      dialogFormVisible: false,
      show: false,
      formLabelWidth: "100px",
      image: {
        imageName: "",
        imagePath: ""
      },
      fileList: [],
      fileImage: "",
      updateList: [],
      fileUpdateImage: "",
      oldImage: ""
    }
  },
  mounted() {
    axios.get("/api/admin/image/list")
        .then(res => {
          if (res.data.code === 200) {
            this.imageList = res.data.data;
            // console.log(this.imageList)
          }
        })
  },
  methods: {
    cancal() {
      this.dialogFormVisible = false;
      this.updateList = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log(scope);
      this.dialogFormVisible = true;
      this.image = row;
      this.updateList = [];
      // if(this.updateList.length == 0){
      this.updateList.push({
        name: this.image.imagePath,
        url: 'http://localhost:8081/admin/image/loadimage?fileName=' + this.image.imagePath
      })
      // }
      // console.log(this.updateList[0])
      // console.log('http://localhost:8080/admin/image/loadimage?fileName=' + this.image.imagePath)
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    setSrcList(imagePath) {
      // console.log(imagePath+"11111")
      this.srcList.push(this.url + imagePath)
    },
    handleRemove(file) {
      console.log(file);
    },
    handleSuccess(response) {
      // console.log(response)
      if (response.code === 200) {
        this.fileImage = response.data;
        MessagePlugin.success('成功')
      }
    },
    onSuccess(response) {
      // console.log(response)
      if (response.code === 200) {

        if (this.fileUpdateImage != null && this.fileUpdateImage != "") {
          this.oldImage = this.fileUpdateImage;
        }
        this.fileUpdateImage = response.data;
        MessagePlugin.success('成功')
      }
    },
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        this.fileList = [fileList[fileList.length - 1]];
        let that = this;
        this.$nextTick(() => {
          // 主动去调用提交接口
          // that.$refs.upload.submit();
          // console.log(that.fileImage)
          axios.post("/api/admin/image/deleteimage", {
            fileImage: that.fileImage
          })
              .then(res => {
                if (res.data.code === 200) {
                  // console.log("删除成功")
                  MessagePlugin.success("成功")
                }
              });

        })
      }
    },
    addImage() {
      this.image.imagePath = this.fileImage;
      axios.post("/api/admin/image/add", this.image)
          .then(res => {
            if (res.data.code === 200) {
              MessagePlugin.success("成功")
              this.show = false;
            } else {
              MessagePlugin.error("失败")
            }
          })
    },
    // handleEdit(row){
    //     console.log(row)
    //     this.dialogFormVisible = true;
    //     this.image = row
    // },
    updateImage() {
      this.image.imagePath = this.fileUpdateImage
      if (this.oldImage != null && this.oldImage.trim() != "") {
        axios.post("/api/admin/image/deleteimage", {
          fileImage: this.oldImage
        })
            .then(res => {
              if (res.data.code === 200) {
                // console.log("删除成功")
                MessagePlugin.success("成功")
              }
            });
      }
      axios.post("/api/admin/image/update", this.image)
          .then(res => {
            if (res.data.code === 200) {
              MessagePlugin.success("成功")
              this.dialogFormVisible = false
            }
          })
    },
    onChange(file, updateList) {
      // console.log()
      if (updateList.length > 1) {
        this.updateList = [updateList[updateList.length - 1]];
        console.log(this.updateList[0])
        // let that = this;
        this.$nextTick(() => {
        })
      }

    }
  }
}

</script>

<style>
.buttonHeader {
  margin: 20px;
}
</style>